<template>
	<uni-popup ref="popup" type="bottom" @change="onPopupChange">
		<view class="picker-popup">
			<view class="header">
				<view class="cancel" @click="closePopup" data-type="dateList">
					取消
				</view>
				<view class="confirm" @click="confirm" data-type="dateList">
					确定
				</view>
			</view>
			<view class="main">
				<picker-view indicator-style="height: 50px" :value="value" @change="onPickerViewChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in list" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'dataSelect',
		data() {
			return {
				value:0,
				// list: ['忠诚', '阳光', '美丽', '和顺']
			}
		},
		props:{
			show:Boolean,
			list:Array
		},
		watch:{
			show(newVal) {
				if (newVal) {
					this.showPopup();
				}
			},
		},
		methods:{
			onPopupChange(e){
				console.log(e);
				this.$emit('showDateSelect',e.show)
			},
			closePopup() {
				this.$refs.popup.close();
			},
			showPopup() {
				this.$refs.popup.open();
			},
			catch () {
				this.closePopup();
			},
			confirm() {
				this.closePopup();
				this.$emit('confire',this.value)
			},
			onPickerViewChange(e){
				this.value = e.detail.value[0];
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/style/flex.scss";

	.picker-popup {
		padding: 0 24rpx;
		background-color: #fff;
	
		>.header {
			font-size: 28rpx;
			padding: 24rpx 0;
			@include flex-r-between-center;
	
			.cancel {
				color: #969799;
			}
	
			.confirm {
				color: #576b95;
			}
		}
	
		>.main {
			@include flex-r;
	
			picker-view,
			.section {
				flex: 1 0 0;
				height: 400rpx;
	
				.item {
					height: 50px;
					@include flex-r-center-center;
				}
			}
	
			.section {
				@include flex-r-center-center;
			}
		}
	}
</style>
